ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங்: செயல்திறன் மேம்படுத்தலுக்கான ஒரு உலகளாவிய வழிகாட்டி

இன்றைய இணைய மேம்பாட்டுச் சூழலில், வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்குவது மிக முக்கியமானது. ஜாவாஸ்கிரிப்ட், ஃபிரன்ட்-எண்ட் ஊடாடல்களின் ஆற்றல் மையமாக இருப்பதால், சரியாக மேம்படுத்தப்படாவிட்டால் அது ஒரு தடையாக மாறக்கூடும். மேம்படுத்தலின் ஒரு முக்கிய அம்சம் மாட்யூல் கேச்சிங் ஆகும். இந்த வழிகாட்டி ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங் நுட்பங்கள் மற்றும் உலகளாவிய கண்ணோட்டத்துடன் இணையதள செயல்திறனில் அவற்றின் தாக்கம் பற்றிய விரிவான புரிதலை வழங்குகிறது.

ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங் என்றால் என்ன?

ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங் என்பது ஜாவாஸ்கிரிப்ட் மாட்யூல் கோப்புகளை பிரவுசர் அல்லது ஒரு ப்ராக்ஸி சர்வரில் (சிடிஎன் போன்றவை) சேமிக்கும் ஒரு செயல்முறையாகும், இதனால் அவை அடுத்தடுத்த பக்க ஏற்றங்கள் அல்லது பயனர் அமர்வுகளுக்கு மீண்டும் மீண்டும் பதிவிறக்கம் செய்யப்படத் தேவையில்லை. ஒவ்வொரு முறையும் ஆரிஜின் சேவையகத்திலிருந்து மாட்யூலைப் பெறுவதற்குப் பதிலாக, பிரவுசர் அதை கேச்சிலிருந்து மீட்டெடுக்கிறது, இது ஏற்றுதல் நேரத்தை கணிசமாகக் குறைக்கிறது.

இதை இப்படி நினைத்துப் பாருங்கள்: நீங்கள் ஒரு பீட்சாவை ஆர்டர் செய்கிறீர்கள். முதல் முறை நீங்கள் ஆர்டர் செய்யும்போது, பீட்சா கடை மாவைத் தயாரிக்க வேண்டும், டாப்பிங்ஸைச் சேர்க்க வேண்டும், அதை பேக் செய்ய வேண்டும். ஆனால் அடுத்த முறை, அவர்களிடம் முன்பே தயாரிக்கப்பட்ட பீட்சா தயாராக இருந்தால், அது மிகவும் வேகமாக இருக்கும். மாட்யூல் கேச்சிங் என்பது முன்பே தயாரிக்கப்பட்ட பீட்சா கிடைப்பது போன்றது.

உலகளாவிய செயல்திறனுக்கு மாட்யூல் கேச்சிங் ஏன் முக்கியமானது?

பயனுள்ள மாட்யூல் கேச்சிங்கின் தாக்கம் பல காரணிகளால் உலகளாவிய பார்வையாளர்களுக்குப் பெரிதாகிறது:

• குறைக்கப்பட்ட லேட்டன்சி: புவியியல் ரீதியாக தொலைதூர இடங்களில் உள்ள பயனர்கள் ஆரிஜின் சேவையகத்திலிருந்து வளங்களைப் பெறும்போது அதிக லேட்டன்சியை அனுபவிக்கிறார்கள். கேச்சிங் இந்த நீண்ட தூர கோரிக்கைகளின் மீதான சார்பைக் குறைத்து, வேகமான அனுபவத்தை வழங்குகிறது. உதாரணமாக, ஒரு பயனர் டோக்கியோவில் இருந்து நியூயார்க்கில் உள்ள ஒரு சேவையகத்தை அணுகும்போது கேச்சிங் மூலம் பெரிதும் பயனடைவார்.
• குறைந்த பேண்ட்வித் நுகர்வு: ஒரே ஜாவாஸ்கிரிப்ட் மாட்யூல்களை மீண்டும் மீண்டும் பதிவிறக்குவது குறிப்பிடத்தக்க பேண்ட்வித்தை நுகர்கிறது. கேச்சிங் தரவுப் பரிமாற்றத்தைக் குறைத்து, செலவுகளைச் சேமித்து, செயல்திறனை மேம்படுத்துகிறது, குறிப்பாக வளரும் நாடுகளில் வரையறுக்கப்பட்ட அல்லது விலையுயர்ந்த இணைய அணுகல் உள்ள பயனர்களுக்கு.
• மேம்படுத்தப்பட்ட பயனர் அனுபவம்: வேகமான ஏற்றுதல் நேரங்கள் மென்மையான மற்றும் ஈடுபாட்டுடன் கூடிய பயனர் அனுபவத்திற்கு வழிவகுக்கிறது. பயனர்கள் மெதுவாக ஏற்றப்படும் இணையதளத்தை கைவிடுவது குறைவு, இது அதிக மாற்றங்கள் மற்றும் திருப்திக்கு வழிவகுக்கிறது. கூகிளின் ஒரு ஆய்வில், மொபைல் பயனர்களில் 53% பேர் ஒரு தளம் ஏற்ற 3 வினாடிகளுக்கு மேல் எடுத்தால் அதை கைவிடுகிறார்கள் என்று காட்டியது.
• மேம்படுத்தப்பட்ட எஸ்சிஓ: கூகிள் போன்ற தேடுபொறிகள் இணையதள வேகத்தை ஒரு தரவரிசை காரணியாகக் கருதுகின்றன. ஒரு வேகமான இணையதளம் அதன் தேடுபொறி தெரிவுநிலையை மேம்படுத்தி, அதிக ஆர்கானிக் டிராஃபிக்கை ஈர்க்கும்.
• ஆஃப்லைன் அணுகல்: முறையான கேச்சிங் உத்திகளுடன் (சர்வீஸ் வொர்க்கர்களைப் பயன்படுத்தி), உங்கள் பயன்பாடு ஒரு வரையறுக்கப்பட்ட ஆஃப்லைன் அனுபவத்தை கூட வழங்க முடியும், இது பயனர்கள் இணைய இணைப்பு இல்லாவிட்டாலும் முன்னர் கேச் செய்யப்பட்ட உள்ளடக்கத்தை அணுக அனுமதிக்கிறது. இது நம்பகத்தன்மையற்ற இணைய இணைப்பு உள்ள பகுதிகளில் உள்ள பயனர்களுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும்.

ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங் வகைகள்

ஜாவாஸ்கிரிப்ட் மாட்யூல் டெலிவரியை மேம்படுத்த நீங்கள் பயன்படுத்தக்கூடிய பல அடுக்கு கேச்சிங் உள்ளன:

1. பிரவுசர் கேச்சிங் (HTTP கேச்சிங்)

இது கேச்சிங்கின் மிகவும் அடிப்படையான வடிவமாகும், இது பிரவுசரின் உள்ளமைக்கப்பட்ட கேச்சிங் வழிமுறைகளை நம்பியுள்ளது. ஒரு வளத்தை எவ்வளவு நேரம் கேச் செய்ய வேண்டும் என்று பிரவுசருக்கு அறிவுறுத்த சேவையகத்தால் அனுப்பப்பட்ட HTTP ஹெடர்களைப் இது பயன்படுத்துகிறது. மிக முக்கியமான ஹெடர்கள்:

• Cache-Control: இந்த ஹெடர் கேச்சிங் கொள்கையைக் குறிப்பிடுகிறது. பொதுவான மதிப்புகள் பின்வருமாறு:
• max-age=seconds: ஒரு வளம் கேச் செய்யப்படக்கூடிய அதிகபட்ச நேரத்தை (வினாடிகளில்) குறிப்பிடுகிறது.
• public: பதிலானது எந்த கேச் (எ.கா., பிரவுசர், சிடிஎன்) மூலமாகவும் கேச் செய்யப்படலாம் என்பதைக் குறிக்கிறது.
• private: பதிலானது பயனரின் பிரவுசரால் மட்டுமே கேச் செய்யப்பட முடியும் என்பதைக் குறிக்கிறது.
• no-cache: பிரவுசர் வளத்தை கேச் செய்ய முடியும், ஆனால் அதைப் பயன்படுத்துவதற்கு முன்பு சேவையகத்துடன் சரிபார்ப்பதற்காகச் சரிபார்க்க வேண்டும்.
• no-store: பிரவுசர் வளத்தை கேச் செய்யவே கூடாது.
• Expires: ஒரு வளம் காலாவதியானதாகக் கருதப்படும் தேதி மற்றும் நேரத்தைக் குறிப்பிடுகிறது. Cache-Control பொதுவாக Expires-ஐ விட விரும்பப்படுகிறது.
• ETag: ஒரு வளத்தின் ஒரு குறிப்பிட்ட பதிப்பிற்கான ஒரு தனித்துவமான அடையாளங்காட்டி. பிரவுசர் If-None-Match ஹெடரைப் பயன்படுத்தி அடுத்தடுத்த கோரிக்கையில் ETag மதிப்பை அனுப்பலாம். வளம் மாறவில்லை என்றால், சேவையகம் 304 Not Modified ஸ்டேட்டஸ் கோடுடன் பதிலளிக்க முடியும், இது பிரவுசருக்கு கேச் செய்யப்பட்ட பதிப்பைப் பயன்படுத்தச் சொல்கிறது.
• Last-Modified: ETag-ஐப் போலவே, இந்த ஹெடர் வளமானது கடைசியாக மாற்றியமைக்கப்பட்ட தேதி மற்றும் நேரத்தைக் குறிக்கிறது. பிரவுசர் இந்த மதிப்பை If-Modified-Since ஹெடரைப் பயன்படுத்தி அடுத்தடுத்த கோரிக்கையில் அனுப்பலாம்.

உதாரணம்:

ஒரு ஜாவாஸ்கிரிப்ட் மாட்யூலை ஒரு வாரத்திற்கு கேச் செய்ய பிரவுசருக்குச் சொல்ல, நீங்கள் பின்வரும் HTTP ஹெடரை அமைக்கலாம்:

            Cache-Control: public, max-age=604800
            

              
                Copy
              
            
          

HTTP கேச்சிங்கிற்கான சிறந்த நடைமுறைகள்:

• ஸ்டேடிக் சொத்துக்களுக்கு நீண்ட கேச் ஆயுட்காலங்களைப் பயன்படுத்துங்கள்: ஜாவாஸ்கிரிப்ட் லைப்ரரிகள், சிஎஸ்எஸ் கோப்புகள் மற்றும் படங்கள் போன்ற அரிதாக மாறும் கோப்புகளுக்கு max-age-ஐ நீண்ட காலத்திற்கு (எ.கா., ஒரு வருடம்) அமைக்கவும்.
• கேச் பஸ்டிங்கைச் செயல்படுத்தவும்: நீங்கள் ஒரு ஸ்டேடிக் சொத்தைப் புதுப்பிக்கும்போது, பயனர்கள் கேச் செய்யப்பட்ட பதிப்பைப் தொடர்ந்து பயன்படுத்தாமல் இருப்பதை உறுதி செய்ய வேண்டும். கேச் பஸ்டிங் என்பது கோப்புப் பெயரில் ஒரு பதிப்பு எண் அல்லது ஹேஷைச் சேர்ப்பதை உள்ளடக்கியது (எ.கா., main.js?v=1.2.3 அல்லது main.4e5a9b2.js). கோப்பு மாறும்போது, கோப்புப் பெயரும் மாறும், இது பிரவுசரைப் புதிய பதிப்பைப் பதிவிறக்கம் செய்யும்படி கட்டாயப்படுத்துகிறது.
• சரிபார்ப்புக்கு ETags-ஐப் பயன்படுத்தவும்: ETags, கேச் செய்யப்பட்ட வளம் இன்னும் செல்லுபடியாகுமா என்பதை முழு கோப்பையும் பதிவிறக்கம் செய்யாமலேயே திறமையாகச் சரிபார்க்க பிரவுசரை அனுமதிக்கிறது.

2. உள்ளடக்க விநியோக நெட்வொர்க்குகள் (சிடிஎன்)

சிடிஎன்கள் என்பவை பயனர்களுக்கு நெருக்கமாக ஸ்டேடிக் உள்ளடக்கத்தை கேச் செய்யும் உலகளவில் விநியோகிக்கப்பட்ட சேவையகங்களின் நெட்வொர்க்குகள் ஆகும். ஒரு பயனர் ஒரு ஜாவாஸ்கிரிப்ட் மாட்யூலைக் கோரும்போது, அவர்களுக்கு மிக அருகில் உள்ள சிடிஎன் சேவையகம் உள்ளடக்கத்தை வழங்குகிறது, இது லேட்டன்சியைக் குறைத்து செயல்திறனை மேம்படுத்துகிறது.

சிடிஎன் பயன்படுத்துவதன் நன்மைகள்:

• குறைக்கப்பட்ட லேட்டன்சி: சிடிஎன்கள் உலகின் பல பிராந்தியங்களில் சேவையகங்களைக் கொண்டுள்ளன, பயனர்களின் இருப்பிடத்தைப் பொருட்படுத்தாமல் உள்ளடக்கம் விரைவாக வழங்கப்படுவதை உறுதி செய்கிறது.
• அதிகரித்த பேண்ட்வித்: சிடிஎன்கள் அதிக அளவிலான டிராஃபிக்கைக் கையாள முடியும், இது உங்கள் ஆரிஜின் சேவையகத்தின் சுமையைக் குறைக்கிறது.
• மேம்படுத்தப்பட்ட கிடைக்கும் தன்மை: சிடிஎன்கள் பணிமிகுதிப் பகிர்வை வழங்குகின்றன, உங்கள் ஆரிஜின் சேவையகத்தில் செயலிழப்பு ஏற்பட்டாலும் உங்கள் இணையதளம் தொடர்ந்து கிடைப்பதை உறுதி செய்கிறது.

பிரபலமான சிடிஎன் வழங்குநர்கள்:

• Cloudflare: அடிப்படை சிடிஎன் அம்சங்களுடன் ஒரு இலவச திட்டத்தை வழங்குகிறது, அத்துடன் வலை பயன்பாட்டு ஃபயர்வால் (WAF) மற்றும் DDoS பாதுகாப்பு போன்ற மேம்பட்ட அம்சங்களுடன் கட்டணத் திட்டங்களையும் வழங்குகிறது.
• Amazon CloudFront: அமேசானின் சிடிஎன் சேவை, மற்ற AWS சேவைகளுடன் ஒருங்கிணைக்கப்பட்டுள்ளது.
• Akamai: உலகளாவிய நெட்வொர்க் மற்றும் மேம்பட்ட அம்சங்களைக் கொண்ட ஒரு முன்னணி சிடிஎன் வழங்குநர்.
• Fastly: அதன் செயல்திறன் மற்றும் டெவலப்பர்-நட்பு அம்சங்களுக்காக அறியப்பட்ட ஒரு சிடிஎன்.
• Google Cloud CDN: கூகிளின் சிடிஎன் சேவை, கூகிள் கிளவுட் பிளாட்ஃபார்முடன் ஒருங்கிணைக்கப்பட்டுள்ளது.

ஒரு சிடிஎன்-ஐ கட்டமைத்தல்:

ஒரு சிடிஎன்-ஐ கட்டமைக்கும் செயல்முறை பொதுவாக பின்வருவனவற்றை உள்ளடக்கியது:

1. ஒரு சிடிஎன் கணக்கிற்குப் பதிவு செய்தல்.
2. உங்கள் ஆரிஜின் சேவையகத்திலிருந்து உள்ளடக்கத்தைப் பெற உங்கள் சிடிஎன்-ஐ கட்டமைத்தல். இது பொதுவாக உங்கள் சேவையகத்தின் ஹோஸ்ட்பெயர் அல்லது ஐபி முகவரியைக் குறிப்பிடுவதை உள்ளடக்குகிறது.
3. சிடிஎன்-க்கு சுட்டிக்காட்ட உங்கள் டிஎன்எஸ் பதிவுகளைப் புதுப்பித்தல். இது பயனர்களை உங்கள் ஆரிஜின் சேவையகத்திற்குப் பதிலாக சிடிஎன்-க்கு வழிநடத்துகிறது.
4. சிடிஎன்-இல் கேச்சிங் விதிகளை கட்டமைத்தல். இது வெவ்வேறு வகையான உள்ளடக்கத்தை எவ்வளவு நேரம் கேச் செய்ய வேண்டும் என்பதைக் குறிப்பிட உங்களை அனுமதிக்கிறது.

3. சர்வீஸ் வொர்க்கர்கள்

சர்வீஸ் வொர்க்கர்கள் என்பவை பிரவுசர் மற்றும் நெட்வொர்க்கிற்கு இடையில் ஒரு ப்ராக்ஸியாக செயல்படும் ஜாவாஸ்கிரிப்ட் கோப்புகள். அவை நெட்வொர்க் கோரிக்கைகளை இடைமறித்து, வளங்களை கேச் செய்து, பயனர் ஆஃப்லைனில் இருக்கும்போது கூட கேச்சிலிருந்து உள்ளடக்கத்தை வழங்க முடியும்.

மாட்யூல் கேச்சிங்கிற்காக சர்வீஸ் வொர்க்கர்களைப் பயன்படுத்துவதன் நன்மைகள்:

• ஆஃப்லைன் அணுகல்: சர்வீஸ் வொர்க்கர்கள் உங்கள் பயன்பாட்டை ஆஃப்லைனில் அல்லது குறைந்த இணைப்புச் சூழல்களில் வேலை செய்ய அனுமதிக்கின்றன.
• துல்லியமான கட்டுப்பாடு: சர்வீஸ் வொர்க்கர்கள் கேச்சிங் நடத்தை மீது உங்களுக்கு முழுமையான கட்டுப்பாட்டைக் கொடுக்கின்றன. வளத்தின் வகை, கோரிக்கை URL மற்றும் பிற காரணிகளின் அடிப்படையில் நீங்கள் தனிப்பயன் கேச்சிங் உத்திகளை வரையறுக்கலாம்.
• பின்னணி ஒத்திசைவு: சர்வீஸ் வொர்க்கர்கள் வளங்களை முன்கூட்டியே கேச் செய்தல் அல்லது சேவையகத்துடன் தரவை ஒத்திசைத்தல் போன்ற பின்னணிப் பணிகளைச் செய்ய முடியும்.

சர்வீஸ் வொர்க்கர் கேச்சிங்கை செயல்படுத்துதல்:

ஜாவாஸ்கிரிப்ட் மாட்யூல்களை கேச் செய்ய சர்வீஸ் வொர்க்கரை எவ்வாறு பயன்படுத்துவது என்பதற்கான ஒரு அடிப்படை எடுத்துக்காட்டு இங்கே:

1. சர்வீஸ் வொர்க்கரைப் பதிவு செய்யுங்கள்: உங்கள் முக்கிய ஜாவாஸ்கிரிப்ட் கோப்பில், சர்வீஸ் வொர்க்கரைப் பதிவு செய்யுங்கள்:

            if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(err) {
      console.log('Service Worker registration failed:', err);
    });
}
            

              
                Copy
              
            
          

2. சர்வீஸ் வொர்க்கர் கோப்பை உருவாக்கவும் (service-worker.js): இந்தக் கோப்பில், நீங்கள் கேச்சிங் தர்க்கத்தை வரையறுப்பீர்கள்:

            const cacheName = 'my-site-cache-v1';
const cacheAssets = [
  '/js/main.js',
  '/js/module1.js',
  '/js/module2.js',
  // Add other assets to cache
];

// Call Install Event
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches
      .open(cacheName)
      .then((cache) => {
        console.log('Service Worker: Caching Files');
        return cache.addAll(cacheAssets);
      })
      .then(() => self.skipWaiting())
  );
});

// Call Activate Event
self.addEventListener('activate', e => {
  console.log('Service Worker: Activated');
  // Remove unwanted caches
  e.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== cacheName) {
            console.log('Service Worker: Clearing Old Cache');
            return caches.delete(cache);
          }
        })
      );
    })
  );
});

// Call Fetch Event
self.addEventListener('fetch', e => {
  console.log('Service Worker: Fetching');
  e.respondWith(
    fetch(e.request)
      .catch(() => caches.match(e.request))
  );
});
            

              
                Copy
              
            
          

விளக்கம்:

• Install Event: சர்வீஸ் வொர்க்கர் நிறுவப்படும்போது இந்த நிகழ்வு தூண்டப்படுகிறது. இந்த நிகழ்வில், நாம் ஒரு குறிப்பிட்ட பெயருடன் ஒரு கேச்சைத் திறந்து, கேச் செய்ய வேண்டிய சொத்துக்களைச் சேர்க்கிறோம்.
• Activate Event: சர்வீஸ் வொர்க்கர் செயல்படுத்தப்படும்போது இந்த நிகழ்வு தூண்டப்படுகிறது. இந்த நிகழ்வில், கேச் செய்யப்பட்ட சொத்துக்களின் சமீபத்திய பதிப்பைப் பயன்படுத்துவதை உறுதிசெய்ய, பழைய கேச்களை அகற்றுகிறோம்.
• Fetch Event: பிரவுசர் ஒரு நெட்வொர்க் கோரிக்கையைச் செய்யும்போது இந்த நிகழ்வு தூண்டப்படுகிறது. இந்த நிகழ்வில், நாம் கோரிக்கையை இடைமறித்து, நெட்வொர்க்கிலிருந்து வளத்தைப் பெற முயற்சிக்கிறோம். நெட்வொர்க் கோரிக்கை தோல்வியுற்றால் (எ.கா., பயனர் ஆஃப்லைனில் இருந்தால்), நாம் கேச்சிலிருந்து வளத்தை மீட்டெடுக்க முயற்சிக்கிறோம்.

4. மாட்யூல் பண்ட்லர்கள் மற்றும் கோட் ஸ்பிளிட்டிங்

Webpack, Parcel, மற்றும் Rollup போன்ற மாட்யூல் பண்ட்லர்கள் ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங்கை மேம்படுத்துவதில் முக்கிய பங்கு வகிக்கின்றன. அவை உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை சிறிய, மேலும் நிர்வகிக்கக்கூடிய கோப்புகளாக இணைக்கின்றன, அவற்றை பின்னர் திறமையாக கேச் செய்யலாம். கோட் ஸ்பிளிட்டிங், இந்த பண்ட்லர்களால் ஆதரிக்கப்படும் ஒரு நுட்பம், உங்கள் பயன்பாட்டை தேவைக்கேற்ப ஏற்றக்கூடிய சிறிய துண்டுகளாகப் பிரிக்க உங்களை அனுமதிக்கிறது, இது ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைத்து செயல்திறனை மேம்படுத்துகிறது.

மாட்யூல் பண்ட்லர்கள் மற்றும் கோட் ஸ்பிளிட்டிங் பயன்படுத்துவதன் நன்மைகள்:

• குறைக்கப்பட்ட ஆரம்ப ஏற்றுதல் நேரம்: கோட் ஸ்பிளிட்டிங் ஆரம்ப பக்க ஏற்றுதலுக்குத் தேவையான குறியீட்டை மட்டுமே ஏற்ற உங்களை அனுமதிக்கிறது, இது பதிவிறக்கம் செய்யப்பட வேண்டிய தரவின் அளவைக் குறைக்கிறது.
• மேம்படுத்தப்பட்ட கேச்சிங் செயல்திறன்: உங்கள் குறியீட்டை சிறிய துண்டுகளாகப் பிரிப்பதன் மூலம், உங்கள் பயன்பாட்டின் மாறிய பகுதிகளுக்கு மட்டுமே கேச்சைச் செல்லாததாக்க முடியும்.
• சிறந்த பயனர் அனுபவம்: வேகமான ஏற்றுதல் நேரங்கள் மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.

உதாரணம்: கோட் ஸ்பிளிட்டிங்கிற்கான Webpack கட்டமைப்பு

            module.exports = {
  // ...
  entry: {
    main: './src/index.js',
    vendor: ['react', 'react-dom'], // Example of vendor libraries
  },
  output: {
    filename: '[name].[contenthash].js', // Adding contenthash for cache busting
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  // ...
};
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், Webpack குறியீட்டை இரண்டு துண்டுகளாகப் பிரிக்க கட்டமைக்கப்பட்டுள்ளது: main மற்றும் vendors. vendors துண்டில் React மற்றும் React DOM லைப்ரரிகளுக்கான குறியீடு உள்ளது, அவை அடிக்கடி மாற வாய்ப்பில்லை. இது பிரவுசரை vendors துண்டை நீண்ட காலத்திற்கு கேச் செய்ய அனுமதிக்கிறது, அதே நேரத்தில் vendors துண்டின் கேச்சிங்கைப் பாதிக்காமல் main துண்டு அடிக்கடி புதுப்பிக்கப்படலாம். கோப்புப் பெயரில் உள்ள contenthash ஆனது, குறியீடு மாறும்போது பிரவுசர் எப்போதும் சமீபத்திய பதிப்பைப் பதிவிறக்கும் என்பதை உறுதி செய்கிறது.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் செயல்படுத்தல் உத்திகள்

பல்வேறு சூழ்நிலைகளில் ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங்கை எவ்வாறு செயல்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்:

1. இ-காமர்ஸ் இணையதளம்

ஒரு இ-காமர்ஸ் இணையதளத்தில் பொதுவாக தயாரிப்பு பட்டியல்கள், ஷாப்பிங் கார்ட் செயல்பாடு, பயனர் அங்கீகாரம் மற்றும் கட்டணச் செயலாக்கம் போன்ற அம்சங்களுக்காக அதிக எண்ணிக்கையிலான ஜாவாஸ்கிரிப்ட் மாட்யூல்கள் உள்ளன. செயல்திறனை மேம்படுத்த, நீங்கள் பின்வரும் உத்திகளைப் பயன்படுத்தலாம்:

• ஸ்டேடிக் சொத்துக்களுக்கான சிடிஎன்: ஜாவாஸ்கிரிப்ட் லைப்ரரிகள், சிஎஸ்எஸ் கோப்புகள் மற்றும் படங்கள் போன்ற ஸ்டேடிக் சொத்துக்களை வழங்க ஒரு சிடிஎன்-ஐப் பயன்படுத்தவும்.
• கோட் ஸ்பிளிட்டிங்: உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை செயல்பாட்டின் அடிப்படையில் சிறிய துண்டுகளாகப் பிரிக்கவும். உதாரணமாக, நீங்கள் தயாரிப்புப் பட்டியல் பக்கம், ஷாப்பிங் கார்ட் பக்கம் மற்றும் செக்அவுட் பக்கம் ஆகியவற்றிற்கு தனித்தனி துண்டுகளை வைத்திருக்கலாம்.
• ஆஃப்லைன் அணுகலுக்கான சர்வீஸ் வொர்க்கர்: உங்கள் இணையதளத்தின் முக்கிய சொத்துக்களை கேச் செய்ய ஒரு சர்வீஸ் வொர்க்கரைப் பயன்படுத்தவும், பயனர்கள் ஆஃப்லைனில் இருக்கும்போதும் தயாரிப்புகளை உலவ அனுமதிக்கிறது.
• HTTP கேச்சிங்: அனைத்து ஸ்டேடிக் சொத்துக்களுக்கும் பொருத்தமான HTTP கேச்சிங் ஹெடர்களை அனுப்ப உங்கள் சேவையகத்தை கட்டமைக்கவும்.

2. ஒற்றைப் பக்கப் பயன்பாடு (SPA)

SPAs தங்கள் செயல்பாட்டிற்கு ஜாவாஸ்கிரிப்டை பெரிதும் நம்பியுள்ளன. செயல்திறனை மேம்படுத்த, நீங்கள் பின்வரும் உத்திகளைப் பயன்படுத்தலாம்:

• தீவிர கேச்சிங்: SPAs-ஐ சர்வீஸ் வொர்க்கர்களைப் பயன்படுத்தி தீவிரமாக கேச் செய்யலாம், ஏனெனில் முக்கிய பயன்பாட்டு தர்க்கம் பெரும்பாலும் ஒரு முறை மட்டுமே பதிவிறக்கம் செய்யப்படுகிறது.
• ரூட்-அடிப்படையிலான கோட் ஸ்பிளிட்டிங்: உங்கள் குறியீட்டை ரூட்களின் அடிப்படையில் துண்டுகளாகப் பிரிக்கவும். இது தற்போதைய ரூட்டிற்குத் தேவையான குறியீட்டை மட்டுமே ஏற்ற உங்களை அனுமதிக்கிறது, இது ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைக்கிறது.
• முன்-கேச்சிங்: பயனரால் தேவைப்படக்கூடிய சொத்துக்களை முன்கூட்டியே கேச் செய்ய ஒரு சர்வீஸ் வொர்க்கரைப் பயன்படுத்தவும்.

3. மொபைல் பயன்பாடு

மொபைல் பயன்பாடுகள் பெரும்பாலும் வரையறுக்கப்பட்ட பேண்ட்வித் மற்றும் நம்பகத்தன்மையற்ற நெட்வொர்க் இணைப்புகளைக் கொண்டுள்ளன. செயல்திறனை மேம்படுத்த, நீங்கள் பின்வரும் உத்திகளைப் பயன்படுத்தலாம்:

• சிறிய மாட்யூல் அளவுகள்: பதிவிறக்க நேரத்தைக் குறைக்க உங்கள் ஜாவாஸ்கிரிப்ட் மாட்யூல்களை முடிந்தவரை சிறியதாக வைத்திருங்கள்.
• தீவிர கேச்சிங்: சர்வீஸ் வொர்க்கர்களைப் பயன்படுத்தி சொத்துக்களை தீவிரமாக கேச் செய்யுங்கள்.
• ஆஃப்லைன் ஆதரவு: பயனர்கள் ஆஃப்லைனில் இருக்கும்போதும் பயன்பாட்டைத் தொடர்ந்து பயன்படுத்த அனுமதிக்க ஒரு வலுவான ஆஃப்லைன் அனுபவத்தை வழங்கவும்.

மாட்யூல் கேச்சிங்கை பகுப்பாய்வு செய்வதற்கும் மேம்படுத்துவதற்கும் கருவிகள்

உங்கள் ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங் உத்தியை பகுப்பாய்வு செய்து மேம்படுத்த பல கருவிகள் உதவக்கூடும்:

• Google PageSpeed Insights: கேச்சிங்கிற்கான பரிந்துரைகள் உட்பட, உங்கள் இணையதளத்தின் செயல்திறனை மேம்படுத்துவதற்கான பரிந்துரைகளை வழங்குகிறது.
• WebPageTest: பல்வேறு இடங்கள் மற்றும் நெட்வொர்க் நிலைமைகளிலிருந்து உங்கள் இணையதளத்தின் செயல்திறனைச் சோதிக்க உங்களை அனுமதிக்கிறது.
• Chrome DevTools: நெட்வொர்க் பேனல் உட்பட, உங்கள் இணையதளத்தின் செயல்திறனைப் பகுப்பாய்வு செய்வதற்கான பல்வேறு கருவிகளை வழங்குகிறது, இது வளங்களைப் பதிவிறக்க எவ்வளவு நேரம் ஆகும் என்பதைக் காட்டுகிறது.
• Lighthouse: வலைப்பக்கங்களின் தரத்தை மேம்படுத்துவதற்கான ஒரு திறந்த மூல, தானியங்கு கருவி. இது செயல்திறன், அணுகல், முற்போக்கு வலை பயன்பாடுகள், எஸ்சிஓ மற்றும் பலவற்றிற்கான தணிக்கைகளைக் கொண்டுள்ளது.
• Bundle Analyzers (Webpack Bundle Analyzer, Rollup Visualizer): இந்த கருவிகள் உங்கள் ஜாவாஸ்கிரிப்ட் பண்டல்களின் அளவு மற்றும் அமைப்பை காட்சிப்படுத்த உதவுகின்றன, இது கோட் ஸ்பிளிட்டிங் மற்றும் மேம்படுத்தலுக்கான வாய்ப்புகளை அடையாளம் காண உங்களை அனுமதிக்கிறது.

தவிர்க்க வேண்டிய பொதுவான இடர்பாடுகள்

மாட்யூல் கேச்சிங்கைச் செயல்படுத்தும்போது, இந்த பொதுவான இடர்பாடுகளைத் தவிர்க்கவும்:

• அதிகப்படியான கேச்சிங்: வளங்களை மிக நீண்ட காலத்திற்கு கேச் செய்வது பயனர்கள் புதுப்பிப்புகளைப் பார்ப்பதைத் தடுக்கலாம்.
• தவறான கேச் ஹெடர்கள்: தவறான கேச் ஹெடர்களைப் பயன்படுத்துவது வளங்கள் கேச் செய்யப்படுவதைத் தடுக்கலாம் அல்லது அவை மிக நீண்ட காலத்திற்கு கேச் செய்யப்பட காரணமாகலாம்.
• கேச் பஸ்டிங்கைப் புறக்கணித்தல்: கேச் பஸ்டிங்கைச் செயல்படுத்தத் தவறினால், பயனர்கள் கேச் செய்யப்பட்ட வளங்களின் பழைய பதிப்புகளைத் தொடர்ந்து பயன்படுத்த காரணமாகலாம்.
• சர்வீஸ் வொர்க்கர் புதுப்பிப்புகளைப் புறக்கணித்தல்: உங்கள் சர்வீஸ் வொர்க்கரைப் புதுப்பிக்காமல் இருப்பது பயனர்கள் உங்கள் பயன்பாட்டின் பழைய பதிப்பில் சிக்கிக் கொள்ள காரணமாகலாம்.

முடிவுரை

ஜாவாஸ்கிரிப்ட் மாட்யூல் கேச்சிங் என்பது இணைய செயல்திறன் மேம்படுத்தலின் ஒரு முக்கிய அம்சமாகும், குறிப்பாக உலகளாவிய பார்வையாளர்களுக்கு சேவை செய்யும் இணையதளங்கள் மற்றும் பயன்பாடுகளுக்கு. வெவ்வேறு வகையான கேச்சிங்கைப் புரிந்துகொள்வதன் மூலமும், பயனுள்ள கேச்சிங் உத்திகளைச் செயல்படுத்துவதன் மூலமும், சரியான கருவிகளைப் பயன்படுத்துவதன் மூலமும், உங்கள் இணையதளத்தின் ஏற்றுதல் நேரங்களை கணிசமாக மேம்படுத்தலாம், பேண்ட்வித் நுகர்வைக் குறைக்கலாம் மற்றும் பயனர் அனுபவத்தை மேம்படுத்தலாம்.

சிறந்த கேச்சிங் உத்தி உங்கள் இணையதளம் அல்லது பயன்பாட்டின் குறிப்பிட்ட தேவைகளைப் பொறுத்தது என்பதை நினைவில் கொள்ளுங்கள். பல்வேறு நுட்பங்களுடன் பரிசோதனை செய்து, உங்கள் மாற்றங்களின் தாக்கத்தை அளவிட மேலே குறிப்பிடப்பட்ட கருவிகளைப் பயன்படுத்தவும். உங்கள் கேச்சிங் உத்தியைத் தொடர்ந்து கண்காணித்து மேம்படுத்துவதன் மூலம், உங்கள் இணையதளம் உலகெங்கிலும் உள்ள பயனர்களுக்கு வேகமான மற்றும் பதிலளிக்கக்கூடிய அனுபவத்தை வழங்குவதை உறுதிசெய்யலாம்.

மேலும், உங்கள் கேச்சிங் முடிவுகளின் உலகளாவிய தாக்கங்களைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள். உதாரணமாக, வரையறுக்கப்பட்ட பேண்ட்வித் உள்ள பிராந்தியங்களில் உள்ள பயனர்கள் தீவிர கேச்சிங் உத்திகளிலிருந்து அதிகம் பயனடையலாம், அதே நேரத்தில் அதிக பேண்ட்வித் உள்ள பிராந்தியங்களில் உள்ள பயனர்கள் அடிக்கடி புதுப்பிப்புகளிலிருந்து அதிகம் பயனடையலாம். உங்கள் பார்வையாளர்களின் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப உங்கள் கேச்சிங் உத்தியைத் தையல் செய்வதன் மூலம், உங்கள் இணையதளம் அல்லது பயன்பாட்டில் அனைவருக்கும் ஒரு நேர்மறையான அனுபவம் இருப்பதை உறுதிசெய்யலாம்.

இறுதியாக, மாட்யூல் கேச்சிங்கிற்கான சமீபத்திய சிறந்த நடைமுறைகள் மற்றும் தொழில்நுட்பங்களுடன் புதுப்பித்த நிலையில் இருப்பது முக்கியம். இணைய மேம்பாட்டுச் சூழல் தொடர்ந்து வளர்ந்து வருகிறது, மேலும் புதிய கருவிகள் மற்றும் நுட்பங்கள் எல்லா நேரத்திலும் உருவாக்கப்படுகின்றன. தொடர்ந்து கற்றுக்கொள்வதன் மூலமும், மாற்றியமைப்பதன் மூலமும், உங்கள் இணையதளம் செயல்திறன் மேம்படுத்தலின் முன்னணியில் இருப்பதை உறுதிசெய்யலாம்.